<template>
  <div>
    <router-link class="blogin" to="/login">返回登录</router-link>
    <div class="login-logo">
      <img src="../assets/header-logo.png" alt="" />
    </div>
    <van-form class="fname">
      <van-field
        required
        label="邮箱"
        placeholder="请输入邮箱"
        v-model="uemail"
        :error-message="uemailMsg"
        @blur.native.capture="checkemail"
      ></van-field>

      <van-field
        required
        label="新密码"
        placeholder="请输入新密码"
        type="password"
        v-model="upwd"
        :error-message="upwdMsg"
        @blur.native.capture="checkPwd"
      ></van-field>

      <van-field
        required
        label="确认新密码"
        placeholder="请再次输入新密码"
        type="password"
        v-model="upwd2"
        :error-message="upwd2Msg"
        @blur.native.capture="checkPwd2"
      ></van-field>

      <van-field
        v-model="umsg"
        class="msg"
        center
        clearable
        label="验证码"
        placeholder="请输入验证码"
        use-button-slot
      >
        <van-button slot="button" size="small" type="primary" @click="content">
          发送验证码
        </van-button>
      </van-field>
      <van-button type="primary" @click.native.capture="checkForm"
        >提交</van-button
      >
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      upwd: "",
      upwd2: "",
      upwdMsg: "",
      upwd2Msg: "",
      uemail: "",
      uemailMsg: "",
      umsg: "",
    };
  },
  methods: {
    content() {
      var url = `http://101.42.154.211:8080/qyj/sys/userDo/getEmailCode?email=${this.uemail}`;
      this.axios.get(url).then((res) => {
        this.data = res.data;
      });
    },
    checkForm() {
      let params = {
        email: this.uemail,
        password: this.upwd,
        checkCode: this.umsg,
      };
      console.log("params", params);
      var url = "/sys/userDo/rePwd";
      this.axios
        .post(url, params, { "Content-Type": "application/json" })
        .then((res) => {
          console.log("注册业务", res);
          if (res.data.code == 2000) {
            alert("密码修改成功");
            this.$router.push("/login");
          } else {
            this.$messagebox("提示", "邮箱或验证码有误，请重新输入");
          }
        });
    },

    checkemail() {
      let exp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (this.uemail == "" || exp.test(this.uemail)) {
        this.uemailMsg = "";
      } else {
        this.uemailMsg = "邮箱格式有误";
      }
    },
    checkPwd() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (this.upwd == "" || exp.test(this.upwd)) {
        this.upwdMsg = "";
      } else {
        this.upwdMsg = "请以字母开头,长度6~18之间,只能包含字母、数字和下划线";
      }
    },
    checkPwd2() {
      let exp = /^[a-zA-Z]\w{5,17}$/;
      if (exp.test(this.upwd2) && this.upwd == this.upwd2) {
        this.upwd2Msg = "";
      } else {
        this.upwd2Msg = "两次密码不一致";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.blogin {
  color: #aaa;
  position: absolute;
  right: 6vw;
  top: 6vw;
  font-size: 0.8em;
}
.login-logo {
  position: absolute;
  width: 100%;
  top: 16vw;
  text-align: center;
}
.fname {
  margin: 70vw 10vw 10vw;
}

.van-button--normal {
  width: 80%;
  position: absolute;
  bottom: 10vw;
  border: none;
  background-color: orange;
  border-radius: 50px;
}
</style>
